<template>
	<div class="view-user">
		<div class="pane">
			<!-- 组织架构 -->
			<div class="dept" :class="[isExpand ? '_expand' : '_collapse']">
				<dept-tree @row-click="onDeptRowClick" />
			</div>
			<!-- 成员列表 -->
			<div class="user">
				<div class="user__header">
					<div class="icon" @click="deptExpand">
						<el-icon v-if="isExpand">
							<arrow-left />
						</el-icon>
						<el-icon v-else>
							<arrow-right />
						</el-icon>
					</div>
					<span>{{ selects.dept?.name }}</span>
				</div>

				<div class="user__container">

					<cl-crud ref="Crud">
						<el-row v-if="selects.dept.id && selects.dept.id != 1" v-show="!getBrowser().isMobile">
							<cl-add-btn />
							<el-button type="warning" :disabled="selects.ids.length <= 0" @click="toMove"
								v-permission="service.demo.goods.permission.minus">减员</el-button>
							<el-button type="danger" :disabled="selects.ids.length != 1" @click="toWarn"
								v-permission="service.demo.goods.permission.minus">出险通知</el-button>
							<el-button type="success" :disabled="selects.ids.length <= 0" @click="toReset"
								v-permission="service.demo.goods.permission.update">标记已阅</el-button>
							<el-button type="success" :disabled="selects.ids.length != 1" @click="onUserEdit"
								v-permission="service.demo.goods.permission.update">编辑</el-button>
							<cl-multi-delete-btn v-permission="service.demo.goods.permission.update" />
							<cl-refresh-btn type="info" />
							<el-button type="success" @click="toExport">导出</el-button>
							<el-upload style="margin-left:12px;" :http-request="handleElUpload" action="" :show-file-list="false">
								<el-button type="warning">导入</el-button>
							</el-upload>

							<el-button @click="onDownloadTemp" link type="primary" style="margin-left:10px;">保全表格模板下载</el-button>
							<cl-flex1 />
							<cl-search-key />
						</el-row>
						<div v-if="selects.dept.id && selects.dept.id != 1" v-show="getBrowser().isMobile">
							<cl-add-btn :icon="Plus" />
							<el-button type="warning" :disabled="selects.ids.length <= 0" :icon="Delete" @click="toMove"
								v-permission="service.demo.goods.permission.minus">减员</el-button>
							<el-button type="danger" :disabled="selects.ids.length != 1" :icon="Delete" @click="toWarn"
								v-permission="service.demo.goods.permission.minus">出险通知</el-button>
							<div class="search">
								<cl-search-key style="width:300px;" />
							</div>

						</div>
						<el-row>
							<cl-table ref="Table" :default-sort="{
								prop: 'createTime',
								order: 'descending'
							}" @selection-change="onSelectionChange">
								<template #column-name="{ scope }">
									{{ scope.row.name }}&nbsp;<el-button v-if="scope.row.isNew == 1" plain size="small" type="danger">new
									</el-button>
								</template>
							</cl-table>
						</el-row>

						<el-row>
							<cl-flex1 />
							<cl-pagination v-if="getBrowser().isMobile" layout="prev, next" />
							<cl-pagination v-if="!getBrowser().isMobile" />
						</el-row>

						<cl-upsert ref="Upsert" />
						<goods-warn-form ref="GoodsWarn" />
						<dept-move-form ref="DeptMove" />
						<goods-export-form ref="GoodsExport" />
					</cl-crud>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { useTable, useUpsert, useCrud } from "@cool-vue/crud";
import { reactive, ref, watch, onMounted } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { useCool } from "/@/cool";
import { useBase } from "/$/base";
import DeptMoveForm from "./components/dept-move.vue";
import GoodsWarnForm from "./components/goods-warn.vue";
import GoodsExportForm from "./components/goods-export.vue";
import DeptTree from "./components/dept-tree.vue";
import { getBrowser } from "/@/cool/utils";
import { ElNotification } from 'element-plus'
import dayjs from "dayjs";
import { Plus, Delete, Edit, Search, Refresh, Download, Upload } from "@element-plus/icons-vue";

const { service } = useCool();
const { app, user } = useBase();

const DeptMove = ref<any>();
const GoodsExport = ref<any>();
const GoodsWarn = ref<any>();
// 是否展开
let isExpand = ref<boolean>(!getBrowser().isMobile);

// 选择项
const selects = reactive<any>({
	dept: {},
	ids: [],
	rows: []
});

// cl-crud 配置
const Crud = useCrud(
	{
		service: service.demo.goods
	},

	(app) => {
		console.log(app)
		// selects.dept = {
		// 	id: user.info?.departmentId,
		// 	name: user.info?.departmentName
		// };
		// app.refresh({
		// 	departmentId: user.info?.departmentId ? user.info?.departmentId : "100000"
		// });
	}
);

// cl-table 配置
const Table = useTable({
	columns: [
		{
			type: "selection",
			width: 60
		},
		{
			type: "index",
			label: "序号",
			width: 60
		},
		{
			prop: "name",
			label: "姓名",
			minWidth: 150
		},
		{
			prop: "idType",
			label: "证件类型",
			minWidth: 100
		},
		{
			prop: "idnumber",
			label: "身份证号",
			minWidth: 200
		},
		{
			prop: "gender",
			label: "性别",
			minWidth: 100,
			dict: [
				{
					label: "女",
					value: 0
				},
				{
					label: "男",
					value: 1
				},
				{
					label: "未知",
					value: 2
				}
			]
		},
		{
			prop: "type",
			label: "工种",
			headerAlign: "center",
			minWidth: 100
		},
		{
			prop: "plusDate",
			label: "增员日期",
			headerAlign: "center",
			minWidth: 100,
			formatter(row, column, cellValue, index) {
				return cellValue ? cellValue.split(" ")[0] : "";
			}
		},
		{
			prop: "minusDate",
			label: "减员日期",
			headerAlign: "center",
			minWidth: 100,
			formatter(row, column, cellValue, index) {
				return cellValue ? cellValue.split(" ")[0] : "";
			}
		},
		{
			prop: "minusDate",
			label: "状态",
			headerAlign: "center",
			minWidth: 100,
			formatter(row, column, cellValue, index) {
				return cellValue ? "减员" : "新增";
			}
		}
	]
});
function validDate(time: any) {
	const sDate = dayjs().toDate();
	return sDate.getTime() > time.getTime();
}
// cl-upsert 配置
const Upsert = useUpsert({
	dialog: {
		width: "500px"
	},
	props: {
		labelPosition: "right",
		labelWidth: "80px"
	},
	items: [
		{
			prop: "name",
			label: "姓名",
			span: 24,
			component: {
				name: "el-input"
			},
			rules: [
				{ required: true, message: "姓名不能为空", trigger: "blur" },
				{ min: 2, max: 20, message: "姓名长度在 2 到 20 个字符" }
			]
		},
		{
			prop: "gender",
			label: "性别",
			required: true,
			span: 24,
			component: {
				name: "el-radio-group",
				options: [
					{
						label: "男",
						value: "1"
					},
					{
						label: "女",
						value: "0"
					}
				]
			}
		},
		{
			prop: "idType",
			label: "证件类型",
			required: true,
			value: getBrowser().isMobile ? "身份证" : "",
			span: 24,
			component: {
				name: "el-select",
				options: [
					{
						label: "身份证",
						value: "身份证"
					},
					{
						label: "护照",
						value: "护照"
					}
				]
			}
		},
		{
			prop: "idnumber",
			label: "证件号",
			span: 24,
			component: {
				name: "el-input"
			},
			rules: [
				{ required: true, message: "身份证号不能为空", trigger: "blur" },
				{
					pattern:
						/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/,
					message: "身份证格式不正确"
				}
			]
		},
		{
			prop: "type",
			label: "工种",
			required: true,
			span: 24,
			component: {
				name: "el-select",
				props: {
					filterable: true,
					allowCreate: true
				},
				options: [
					{
						label: "保安",
						value: "保安"
					},
					{
						label: "保洁",
						value: "保洁"
					},
					{
						label: "司机",
						value: "司机"
					},
					{
						label: "厨师",
						value: "厨师"
					},
					{
						label: "行政",
						value: "行政"
					}
				]
			}
		},
		{
			prop: "plan",
			label: "方案",
			required: true,
			span: 24,
			component: {
				name: "el-select",
				props: {
					filterable: true,
					allowCreate: true
				},
				options: [
					{
						label: "方案一",
						value: "方案一"
					},
					{
						label: "方案二",
						value: "方案二"
					},
					{
						label: "方案三",
						value: "方案三"
					}
				]
			}
		},

		{
			prop: "plusDate",
			label: "增员日期",
			value: dayjs().add(1, "day"),
			required: true,
			span: 24,
			component: {
				name: "el-date-picker",
				props: {
					readonly: false,
					//disabledDate: validDate
				}
			}
		}
	],

	onSubmit(_, data, { next }) {
		next({
			...data,
			state: 0,
			isNew: 1,
			departmentId: selects.dept.id
		});
	},

	async onOpen(isEdit) {
		if (!isEdit) {
			console.log("edit");
		}
	}
});
// 导入参保人数据
async function handleElUpload(e: any) {
	const data = new FormData();
	data.append("file", e.file);
	data.append("departmentId", selects.dept.id);

	service
		.request({
			method: "post",
			data,
			url: "/admin/demo/goods/import"
		})
		.then((res) => {
			refresh({
				page: 1,
				size:10,
				departmentId: selects.dept.id
			});
		});
}
// 导出参保人数据
async function handleExport() {
	service
		.request({
			method: "post",
			url: "/admin/demo/goods/export",
			data: { departmentId: selects.dept.id },
			responseType: "blob"
		})
		.then((res) => {
			const blob = new Blob([res], { type: res.type });
			const url = window.URL.createObjectURL(blob);
			const link = document.createElement("a");
			link.style.display = "none";
			link.href = url;
			link.download = selects.dept.name + ".xlsx";
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link); // 下载完成移除元素
			window.URL.revokeObjectURL(url); // 释放掉blob对象
		});
}

// 刷新列表
function refresh(params: any) {
	Crud.value?.refresh(params);
}

// 多选监听
function onSelectionChange(selection: any[]) {
	selects.ids = selection.map((e) => e.id);
	selects.rows = selection;
}

// 部门选择监听
function onDeptRowClick({ item, ids }: any) {
	selects.dept = item;

	if (getBrowser().isMobile) {
		isExpand.value = false;
	}

	refresh({
		page: 1,
		size: 10,
		departmentId: ids[0] ? ids[0] : 1000000
	});

	service.demo.goods.getnew({departmentId: ids[0]}).then(res=>{
		if(res.length>0){
			ElNotification({
				title: `本公司有新的增员${res.length}人`,
				type: 'warning',
			})
		}
	})
}

// 修改
function onUserEdit() {
	Crud.value?.rowEdit(selects.rows[0]);
}

// 是否显示部门
function deptExpand() {
	isExpand.value = !isExpand.value;
}

// 减员
async function toMove() {
	const asslist = selects.rows.map((item: any) => {
		return item.name;
	});
	DeptMove.value.open(selects.ids, asslist);
}
//
async function toReset() {
	service.demo.goods.resetNew({
								ids: selects.ids
							})
							.then(() => {
								refresh({
									page: 1,
									size:10,
									departmentId: selects.dept.id
								});
							})
}
//出险
async function toWarn() {
	const asslist = selects.rows.map((item: any) => {
		return item.name;
	});
	GoodsWarn.value.open(selects.ids, asslist, selects.dept.name)
}
//导出
async function toExport() {
	GoodsExport.value.open(selects.dept);
}
function onDownloadTemp() {
	window.location.href = "/表格模板4.0.xlsx";
}
onMounted(() => {
	console.log("shenxh");
});
</script>

<style lang="scss" scoped>
.search {
	padding: 10px 0;

	.cl-search-key {
		margin-left: 0;
	}
}

.view-user {
	.pane {
		display: flex;
		height: 100%;
		width: 100%;
		position: relative;
	}

	.dept {
		height: 100%;
		width: 225px;
		max-width: calc(100% - 50px);
		background-color: #fff;
		transition: width 0.3s;
		margin-right: 10px;
		flex-shrink: 0;

		&._collapse {
			margin-right: 0;
			width: 0;
		}
	}

	.user {
		width: calc(100% - 310px);
		flex: 1;

		&__header {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 40px;
			position: relative;
			background-color: #fff;

			span {
				font-size: 18px;
				white-space: nowrap;
				overflow: hidden;
			}

			.icon {
				display: flex;
				align-items: center;
				position: absolute;
				left: 0;
				top: 0;
				font-size: 18px;
				cursor: pointer;
				background-color: #fff;
				height: 40px;
				width: 80px;
				padding-left: 10px;
			}
		}
	}

	.dept,
	.user {
		overflow: hidden;

		&__container {
			height: calc(100% - 40px);
		}
	}

	@media only screen and (max-width: 768px) {
		.dept {
			width: calc(100% - 100px);
		}
	}
}
</style>
